import {
  GestureHandlerRootView,
  Gesture,
  NativeDetector,
  useGesture,
  SingleGestureName,
  GestureDetector,
} from 'react-native-gesture-handler';
import { Pressable, StyleSheet, View, Text } from 'react-native';
import { useState } from 'react';
import { useSharedValue } from 'react-native-reanimated';

export default function App() {
  const [stateEnabled, setStateEnabled] = useState(false);
  const svEnabled = useSharedValue(false);

  const oldPan = Gesture.Pan()
    .enabled(stateEnabled)
    .onUpdate(() => {
      console.log('Old API');
    });

  const newPan = useGesture(SingleGestureName.Pan, {
    enabled: svEnabled,

    onUpdate: () => {
      'worklet';
      console.log('New API');
    },
  });

  return (
    <GestureHandlerRootView style={[styles.container, styles.center]}>
      <View style={[styles.boxContainer, styles.center]}>
        <Pressable
          onPress={() => setStateEnabled((prev) => !prev)}
          style={[styles.button, styles.center]}>
          <Text>Toggle old API</Text>
        </Pressable>
        <GestureDetector gesture={oldPan}>
          <View style={[styles.box, styles.center]} />
        </GestureDetector>
      </View>
      <View style={[styles.boxContainer, styles.center]}>
        <Pressable
          onPress={() => {
            svEnabled.value = !svEnabled.value;
          }}
          style={[styles.button, styles.center]}>
          <Text>Toggle new API</Text>
        </Pressable>
        <NativeDetector gesture={newPan}>
          <View style={[styles.box, styles.center]} />
        </NativeDetector>
      </View>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  center: {
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  container: {
    flex: 1,
  },
  boxContainer: {
    gap: 20,
  },
  button: {
    width: 150,
    height: 40,
    borderRadius: 20,
    backgroundColor: 'pink',
  },
  box: {
    width: 150,
    height: 150,
    backgroundColor: 'lightblue',
    borderRadius: 20,
  },
});